<!DOCTYPE html>
<html style="height:100%;">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <script src="javascripts/dragloader.js"></script>
    <link rel="stylesheet" href="stylesheets/zui.min.css"/>
    <link rel="stylesheet" href="stylesheets/main.css" id="css"/>
    <script src="javascripts/jquery-1.10.1.min.js"></script>
    <script src="javascripts/zui.min.js"></script>
    <script src="javascripts/footer.js"></script>
    <title>斯迈普解盘侠资讯</title>
    <style type="text/css">
    	.titleString{
      		text-align:left; 
    	}
    	.dateString{
	    	font-size:1.2rem;
	    	float:right;
	    	padding-right:5px;
	    	color:#999999;
    	}
    	.sourceString{
    		font-size:1.2rem;
    		float:left;
    		color:#999999;
    	}
    </style>
</head>
<body>
<div class="container main">
    <div class="row info">
        <div class="col-xs-12 ">
            <div class="info-nav-box">
                <div id="news_1" class="col-xs-4 info-nav-active">
                    <div class="tab-c-tab">
                        <div class="tab-c-cell">投资分享</div>
                    </div>
                </div>
                <div id="news_2" class="col-xs-4">
                    <div class="tab-c-tab">
                        <div class="tab-c-cell">财经日历</div>
                    </div>
                </div>
                <div id="news_3" class="col-xs-4">
                    <div class="tab-c-tab">
                        <div class="tab-c-cell">历史讲解</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="info-list">
    </div>
   <footer class="nav-footer">
			<div class="col-xs-3" id="hall" >
				<i class="icon icon-home"></i>
				<h4>解盘</h4>
			</div>
			<div class="col-xs-3" id="notify"  >
				<i class="icon icon-volume-up"></i>
				<h4>喊单</h4>
			</div>
			<div class="col-xs-3  footer-nav-active" id= "news" >
				<i class="icon icon-globe"></i>
				<h4>资讯</h4>
			</div>
			<div class="col-xs-3" id="my" >
				<i class="icon icon-user"></i>
				<h4>个人中心</h4>
			</div>
</footer>
</div>
<script src="javascripts/main.js"></script>
<script>
	var firstPageNo = 1;
	var pageSize = 10;
	var dragger = getDragger(false,false);
	var alreadyHas = [];

    infoNavActive();
    /**
     * 资讯导航头选中状态
     */
    function infoNavActive(){
        var $box = $(".info-nav-box>div");
        $box.click(function () {
            var $this = $(this);
            $box.removeClass("info-nav-active");
            $this.addClass("info-nav-active");
        });
    }
    
    function showDetail(id){
    	var tCtn = $('.info-nav-active > .tab-c-tab > .tab-c-cell').text();
    	var url = "informationDetail.html?id=" + id + '&tCtn=' + tCtn;
    	window.location.href = url;
    }
    
    $(function(){
    	//加载数据信息
        function loadData(paramData,callback){
        	var uri = "../newsController/newsList.do";
    		$.ajax({
    	        type : "get",
    	        dataType : "JSON",
    	        url : uri, 
    	        data : paramData,
    	        success : function(data){
    	        	if(data.success){
    	        		//成功则填充数据
    	        		callback(data);
    	        	}
    	        }, 
    	        error : function(){

    	        }
    		});
        }
        
        function refreshPage(type,pageNo){
        	if(typeof(pageNo) == 'undefined'){
        		//默认加载第一页
        		pageNo = firstPageNo;
        	}
        	var param = {pageSize:pageSize,pageNo:pageNo,type:type};
        	loadData(param, function(data){
        		var newData = compar(data.data.result);
	    		fillData(newData,true);
        	});
        }
        
        //填充数据
        function fillData(data, isTop){
    		var HTML = '';
    		$('#loading').hide();
    		if(data.length == 0){
    			return;
    		}
    		var $width = $('.container').width();
    		var coverImgPath = '';
    		for(var i = 0 ; i < data.length ; i++){
    			alreadyHas.push(data[i][0]);
    			
    			coverImgPath = data[i][2];
    			if(coverImgPath != ''){
    				HTML += '<div class="row info-content-box"><div class="col-xs-12"><table class="table">' +
					'<tbody><tr><td class="col-xs-1" style="width:90px"><img height="60px" src="'+coverImgPath+'"/></td>' + 
					'<td><div class="titleString" style="width:'+($width-90)+'px" onclick="javascript:showDetail(\''+data[i][0]+'\')">' + data[i][1] + '</div><span class="dateString">'+data[i][4]+'</span><span class="sourceString">'+data[i][3]+'</span></td>' +
					'</tr></tbody></table></div></div>';
    			}else{
    				HTML += '<div class="row info-content-box"><div class="col-xs-12"><table class="table">' +
					'<tbody><tr>' + 
					'<td><div class="titleString" style="width:'+($width-10)+'px" onclick="javascript:showDetail(\''+data[i][0]+'\')">' + data[i][1] + '</div><span class="dateString">'+data[i][4]+'</span><span class="sourceString">'+data[i][3]+'</span></td>' +
					'</tr></tbody></table></div></div>';
    			}		
			}
    		
    		if(isTop){
    			$('#info-list').prepend(HTML);
    		}else{
    			$('#info-list').append(HTML);
    		}
        }
        
        //比较获取页面上不存在的数据
    	function compar(dataArr){
    		var arr = [];
    		if(alreadyHas.length <= 0){
    			return dataArr;
    		}
    		
    		for(var i = 0 ;i < dataArr.length ; i++){
    			if(alreadyHas.indexOf(dataArr[i][0]) < 0){
    				//不存在
    				arr.push(dataArr[i]);
    			}
    		}
    		return arr;
    	}
        
        function getType(){
        	return $('.info-nav-active').attr('id').replace('news_','');
        }
        
      	//获取当前应该请求的页码
    	function getPageNo(){
    		var currMsgLength = alreadyHas.length;
    		return (parseInt(currMsgLength / pageSize) + 1);
    	}
      	
    	var params = decodeURI(window.location.search.replace('?',''));
    	if(params != ''){
    		var arr = params.split('=');
			$('.info-nav-box > div').each(function(){
				var $curr = $(this).find('div > div');
				if($curr.text() == arr[1]){
					$curr.click();
				}
			});
    	}
    	
    	refreshPage(getType());
        
        dragger.on('dragDownLoad', function() {
            setTimeout(function() {
                /*备注：此处放置数据刷新的脚本，主要是新闻列表页的 li */
                // 无论何时，必须由业务功能主动调用reset()接口，以还原状态
                // 比如在onDragDownLoad()回调中使用ajax加载数据时，在ajax的回调函数中应当调用reset()重置drag状态
                // 如果不重置，drag操作将失效
                dragger.reset();
                //用户往下滑动，则说明希望刷新最新消息，则查询服务器是否总页数有增加，如果已有的最后页记录数未满，则刷新已有最后页，如已满，则加载最新页
                //检查最新页码有没有变化
                refreshPage(getType());
    			//alert('down刷新');
            }, 500);
        });
    	
    	dragger.on('dragUpLoad', function() {
        	setTimeout(function(){
        		// 如果不重置，drag操作将失效
        		dragger.reset();
        		refreshPage(getType(),getPageNo());
        	}, 500);
    		
        });
    	
    	
    	$('.info-nav-box > div').click(function(){
    		var html = "<div id='loading' style='width:100%;text-align:center'><img src='./images/loading.gif'/><span style='margin-left:10px;'>数据加载中,请稍候……</span></div>";
    		$('#info-list').empty().append(html);
    		alreadyHas = [];
    		var type = $(this).attr('id').replace('news_','');
    		refreshPage(type);
    	});
    });
    
</script>
</body>
</html>